<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search-box">
			<!-- #ifdef H5 -->
			<img src="/static/icons/search.png" mode="aspectFit" class="search-icon" />
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<image src="/static/icons/search.png" mode="aspectFit" class="search-icon"></image>
			<!-- #endif -->

			<input style="height: 10%" type="text" placeholder="输入需要搜索的内容" placeholder-class="placeholder" />
		</view>

		<!-- 筛选条件 -->
		<view class="filter-section d jb">
			<view class="total-count">共3条</view>
			<view class="filter-items">
				<view class="filter-item">
					<text>状态</text>
					<uni-data-select   v-model="value" :localdata="status" @change="change" emptyTips="全部"  :clear="true"></uni-data-select>
				</view>
				<view class="filter-item">
					<text>维修方式</text>
				</view>
				<view class="filter-item">
					<text>日期</text>
				</view>
			</view>
		</view>

		<!-- 维修任务列表 -->
		<view class="task-list">
			<view class="task-item" v-for="(item, index) in taskList" :key="index">
				<view class="task-header">
					<text class="order-number">维修单号: {{ item.orderNumber }}</text>
					<text :class="['status', item.status === '进行中' ? 'status-ongoing' : 'status-completed']">
						{{ item.status }}
					</text>
				</view>
				<view class="d jb">
					<view class="task-content">
						<view class="info-row">
							<text class="label">维修方式:</text>
							<text class="value">{{ item.repairType }}</text>
						</view>
						<view class="info-row">
							<text class="label">预约日期:</text>
							<text class="value">{{ item.appointmentDate }}</text>
						</view>
					</view>
					<view class="task-footer">
						<button class="detail-btn d jc ac" @click="goToDetail(item)">查看详情</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
let value = ref();
let status = ref([
	{ value: 0, text: '篮球' },
	{ value: 1, text: '足球' },
	{ value: 2, text: '游泳' }
]);
function change(e) {
	console.log('e:', e);
}
const taskList = ref([
	{
		orderNumber: '3535252',
		status: '进行中',
		repairType: '到店维修',
		appointmentDate: '2023-03-18 11:00'
	},
	{
		orderNumber: '3535252',
		status: '已完成',
		repairType: '上门取车',
		appointmentDate: '2023-03-18 11:00'
	},
	{
		orderNumber: '3535252',
		status: '进行中',
		repairType: '上门取车',
		appointmentDate: '2023-03-18 11:00'
	}
]);

// 跳转到详情页
const goToDetail = (item) => {
	uni.navigateTo({
		url: `/pages/maintenanceDetail/maintenanceDetail?orderNumber=${item.orderNumber}&status=${item.status}&repairType=${item.repairType}&appointmentDate=${item.appointmentDate}`
	});
};
</script>

<style lang="scss" scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding-top: var(--status-bar-height);
}

.search-box {
	background: #2b7ff3;
	padding: 20rpx;
	position: relative;

	input {
		background-color: #fff;
		border-radius: 40rpx;
		padding: 20rpx 80rpx;
		font-size: 28rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.search-icon {
		position: absolute;
		left: 40rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 40rpx;
		height: 40rpx;
		z-index: 1;
	}

	.placeholder {
		color: #999;
	}
}

.filter-section {
	padding: 20rpx;
	background: #2b7ff3;

	.total-count {
		font-size: 28rpx;
		color: #fff;
		margin-bottom: 20rpx;
	}

	.filter-items {
		display: flex;
		gap: 20rpx;

		.filter-item {
			background-color: rgba(255, 255, 255, 0.2);
			// color: #fff;
			padding: 10rpx 30rpx;
			border-radius: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 10rpx;
			font-size: 28rpx;
 text {
	 color: white;
 }
			.arrow-icon {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}
}

.task-list {
	padding: 20rpx;

	.task-item {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		.task-header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.order-number {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}

			.status {
				font-size: 28rpx;
				font-weight: 500;

				&.status-ongoing {
					color: #2b7ff3;
				}

				&.status-completed {
					color: #52c41a;
				}
			}
		}

		.task-content {
			.info-row {
				display: flex;
				margin-bottom: 16rpx;
				font-size: 28rpx;

				.label {
					color: #666;
					margin-right: 20rpx;
					min-width: 140rpx;
				}

				.value {
					color: #333;
				}
			}
		}

		.task-footer {
			margin-top: 20rpx;
			display: flex;
			justify-content: flex-end;

			.detail-btn {
				background-color: #2b7ff3;
				color: #fff;
				font-size: 28rpx;
				padding: 12rpx 40rpx;
				border-radius: 30rpx;
				line-height: 1.5;
				border: none;

				&::after {
					border: none;
				}

				&:active {
					opacity: 0.9;
				}
			}
		}
	}
}
</style>
